<!-- HomenEcartsShow -->
<template>
  <div id="HomenEcartsShow">
    <div ref="echartsRef" :style="chartStyle" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

/**
 * @date: 2024-10-30 10:21:08
 * @description: Echarts图表封装
 * @params:
 * @modifyContent:
 * @author: Forever丿顾北
**/
const axisOption = {
  // 图文字体颜色
  textStyle: {
    color: '#333'
  },
  // 提示框
  tooltip: {
    trigger: 'axis'
  },
  // X轴配置
  xAxis: {
    type: 'category',
    data: [], // X轴数据
    axisLine: {
      lineStyle: {
        color: '#17b3a3' // X轴线的颜色
      }
    },
    axisLabel: {
      interval: 0, // 坐标轴刻度标签的显示间隔
      color: '#333' // 坐标轴刻度标签的颜色
    }
  },
  // Y轴配置
  yAxis: [{
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#17b3a3' // Y轴线的颜色
      }
    }
  }],
  // 图表颜色
  color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
  // 数据系列
  series: []
}

const normalOptions = {
  // 提示框
  tooltip: {
    trigger: 'item'
  },
  // 图表颜色
  color: [
    '#0f78f4',
    '#dd536b',
    '#9462e5',
    '#a6a6a6',
    '#e1bb22',
    '#39c362',
    '#3ed1cf'
  ],
  // 数据系列
  series: []
}
export default {
  name: 'HomenEcartsShow',
  props: {
    // 动态样式
    chartStyle: {
      type: Object,
      default: () => ({})
    },
    // 图表数据
    chartData: {
      type: Object,
      required: true
    },
    // 是否有坐标系
    isAxiscChart: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 存储 ECharts 实例
      echartsInstance: null
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {
    // 监听 chartData 的变化，深度监听
    chartData: {
      deep: true,
      handler() {
        this.updateEcharts()
      }
    },
    // 监听 isAxiscChart 的变化
    isAxiscChart: {
      handler() {
        this.updateEcharts()
      }
    }
  },

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    // 组件挂载时初始化 ECharts 实例
    this.InitEcharts()
  },
  beforeDestroy() {
    // 组件销毁前销毁 ECharts 实例
    this.destroyEcharts()
  },
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    /**
     * @date: 2024-10-30 10:25:26
     * @description: 组件挂载时初始化 ECharts 实例
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    InitEcharts() {
      const chartDom = this.$refs.echartsRef
      if (chartDom) {
        // 销毁之前的实例
        this.destroyEcharts()
        // 初始化 ECharts 实例
        this.echartsInstance = echarts.init(chartDom)
        // 更新 ECharts 配置
        this.updateEcharts()
      } else {
        console.error('ECharts container not found')
      }
    },
    /**
     * @date: 2024-10-30 10:26:35
     * @description: 更新 ECharts 配置
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    updateEcharts() {
      let options = null
      // 根据 isAxiscChart 的值选择配置
      if (this.isAxiscChart) {
        // 有坐标系的图表
        axisOption.xAxis.data = this.chartData.xData
        axisOption.series = this.chartData.series
        options = axisOption
      } else {
        // 没有坐标系的图表（饼图）
        normalOptions.series = this.chartData.series
        options = normalOptions
      }
      // 设置 ECharts 实例的配置项和数据
      if (this.echartsInstance) {
        this.echartsInstance.setOption(options)
      }
    },
    // 销毁 ECharts 实例
    destroyEcharts() {
      if (this.echartsInstance) {
        this.echartsInstance.dispose()
        this.echartsInstance = null
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
